<template>
  <div class="container">
    <div class="center-container">
      <el-form :model="{'contractData':contractData}" ref="contForm">
        <el-table :data="contractData" border style="width: 100%;" stripe>
          <el-table-column label="序号" min-width="5%">
            <template slot-scope="scope">
              <p class="text-align:center;">{{ scope.$index + 1 }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="contName" label="合同名称" min-width="20%">
            <template slot-scope="scope">
              <el-form-item :prop="'contractData.'+scope.$index+'.contName'"
                            :rules="contRule.contName">
                <el-input
                  v-model.trim="scope.row.contName"
                  placeholder="请输入合同名称" maxlength="200"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="合同编号" min-width="20%">
            <template slot-scope="scope">
              <el-form-item :prop="'contractData.'+scope.$index+'.contCode'"
                            :rules="contRule.contCode">
                <el-input
                  v-model.trim="scope.row.contCode" maxlength="200"
                  placeholder="合同编号"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item>
          <p>
            <el-button @click="addCont()">添 加</el-button>
            <el-button type="primary" @click="submitForm()">保 存</el-button>
            <el-button @click="resetForm()">重 置</el-button>
          </p>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center>
      <span><pre>{{ contractData }}</pre></span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "validate-01",
  data() {
    return {
      contractData: [],

      contRule: {
        contCode: [
          {
            required: true,
            message: '合同编号不能为空',
            trigger: 'change'
          }
        ],
        contAmt: [
          {required: true, message: '合同金额不能为空', trigger: 'change'},
          {
            pattern: /^(0\.0*[1-9]+[0-9]*$|[1-9]+[0-9]*\.[0-9]*[0-9]$|[1-9]+[0-9]*$)/,
            message: '非法数字'
          },
          {
            pattern: /^(([1-9]\d*)|\d)(\.\d{1,2})?$/,
            message: '最多两位小数'
          },
        ],
        contName: [
          {
            required: true,
            message: '请输入合同名称',
            trigger: 'change'
          }
        ],
      },
      centerDialogVisible: false,
    };
  },
  methods: {
    closeDialog() {
      this.centerDialogVisible = false;
      this.$refs.contForm.resetFields();
    },
    submitForm() {
      this.$refs.contForm.validate((valid) => {
        if (valid) {
          if (this.contractData.length === 0) {
            this.$message({
              showClose: true,
              message: '请先添加合同',
              type: 'warning',
              duration: 1500
            });
          } else {
            this.centerDialogVisible = true;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      //this.$refs[formName].resetFields();
      this.$refs.contForm.resetFields();
    },
    addCont() {
      this.contractData.push({
        contName: '',
        contCode: ''
      });
    }
  }
}
</script>

<style scoped>

</style>
